<template>
  <div class="answer">
    <div class="answer-header">
      <div class="answer-index">{{ props.index + 1 }}.</div>
      <div class="answer-title">
        {{ subject.title }}
      </div>
      <div v-if="subjectImage" class="answer-subjectimg">
        <n-image
          v-for="img in subjectImage"
          :key="img"
          lazy
          :src="img"
          :width="240"
          object-fit="cover"
        />
      </div>
    </div>
    <div class="answer-body">
      <div class="answer-options">
        <div
          v-for="(option, index) in options"
          :key="option._id"
          :class="['answer-options--item', { selected: abc[index] === answer }]"
          @click="handleSelect(index)"
        >
          <div class="answer-options--index">{{ abc[index] }}</div>
          <p v-if="option.optionType === 1" class="answer-options--text">
            {{ option.optionText }}
          </p>
          <n-image
            v-else
            lazy
            :src="option.optionImage"
            object-fit="cover"
            width="240"
          />
        </div>
      </div>
    </div>
    <div v-if="props.showAnalysis" class="answer-analysis">
      <div class="answer-analysis--text">
        {{ subject.analysisText }}
      </div>
      <div class="answer-analysis--video">
        {{ subject.analysisVideo }}
      </div>
    </div>
  </div>
  <n-divider />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
  index: {
    type: Number,
    default: 0
  },
  answer: {
    type: String,
    default: ''
  },
  showAnalysis: {
    type: Boolean,
    default: false
  }
})

const abc = ['A', 'B', 'C', 'D', 'E', 'F']
// const num = {
//   A: 1,
//   B: 2,
//   C: 3,
//   D: 4,
//   E: 5,
//   F: 6
// }

const list = computed(() => {
  return props.item
})

const options = computed(() => {
  return list.value.randomOptions
})

const subject = computed(() => {
  return list.value.subject
})

const subjectImage = computed(() => {
  return subject.value.subjectImage ? subject.value.subjectImage.split(',') : ''
})

const emit = defineEmits(['update:answer'])
const answer = computed({
  get: () => props.answer,
  set: val => {
    emit('update:answer', val)
  }
})

const handleSelect = index => {
  answer.value = abc[index]
}
</script>

<style lang="scss" scoped>
.answer {
  width: 1000px;
  margin: 0 auto;
  // margin: 20px 0;
  &-header {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 20px 14px;
    // flex-wrap: wrap;
    gap: 20px;
  }
  &-index {
    font-size: 20px;
    font-weight: bold;
  }
  &-title {
    flex: 1;
    font-size: 20px;
    font-weight: bold;
  }
  &-subjectimg {
    display: flex;
    max-height: 150px;
  }

  &-body {
    padding: 20px 14px;
  }

  &-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    &--text {
      font-size: 20px;
      padding: 0 40px;
      box-sizing: border-box;
    }

    &--item {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 14px;
      padding: 20px;

      display: flex;
      align-items: center;
      justify-content: center;

      position: relative;

      cursor: pointer;

      transition: all 0.2s;

      &.selected {
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
      }
    }

    &--index {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 20px;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 14px 0 14px 0;
      background-color: rgba(0, 0, 0, 0.2);
    }
  }
}
</style>
